<template>
  <uni-popup ref="popup" type="bottom">
    <view class="bgWite">
        <view class="title flex flex-align flex-center" v-if="Object.keys(addressInfo).length!=0">{{addressInfo.pickup==1?'自提点信息':'团长信息' }}</view>
        <view class="title flex flex-align flex-center" v-else>自提点信息</view>
        <view class="colse" @click="close">
          <uni-icons type="closeempty" size="20"></uni-icons>
        </view>
        <view class="scrollView" v-if="Object.keys(addressInfos.addressInfo).length!=0">
          <view class="stroeInfo ">
            <image :style="addressInfo.pickup==1?'':'border-radius: 100%;'" :src="addressInfo.image?getImgUrl(addressInfo.image):'/static/logo.png'" mode="scaleToFill" />
            <view class="stroe-title">{{addressInfo.pickup==1? addressInfo.store_name:addressInfo.name }}</view>
            <view class="km" v-if="addressInfo.pickup==1">{{ addressInfo.km }}km</view>
          </view>
          <view class="stroe-address flex flex-align " v-if="addressInfo.pickup==1">
            <uni-icons type="location" size="24" color="#646566"></uni-icons>
            <view>{{ addressInfo.province }}{{ addressInfo.city }}{{ addressInfo.area }}{{ addressInfo.address }}</view>
          </view>
          <view class="stroe-team flex flex-align flex-center" v-if="addressInfo.pickup==1">
            <view class="flex-1 flex flex-align">
              <uni-icons type="person" size="24" color="#646566"></uni-icons>
              <view class="titles">{{ addressInfo.name }}</view>
            </view>
            <view class="flex-1 flex flex-align" @click="callPhone(addressInfo.phone)">
              <uni-icons type="phone" size="24" color="#646566"></uni-icons>
              <view class="titles">{{ addressInfo.phone }}</view>
            </view>
          </view>
          <view class="stroe-team flex flex-align flex-center" v-else>
            <view class="flex flex-align" @click="callPhone(addressInfo.phone)">
              <uni-icons type="phone" size="24" color="#646566"></uni-icons>
              <view class="titles">{{ addressInfo.phone }}</view>
            </view>
          </view>
        </view>
        <view class="scrollView"  v-else style="padding: 50rpx 0;"> 
          <!-- 暂无自提点信息 -->
          <noData acImg="/static/nodata/noZiti.png" content="暂无自提点，请联系管理员哦" width="300rpx" color="#969799"></noData>  
        </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import NoData from '@/components/noData.vue'
import { getImgUrl,callPhone } from '@/utils/tools'
import { onMounted, ref } from 'vue'
import noData from '@/components/noData.vue'
const addressInfos = defineProps({
  show: {
    type: Boolean,
    default: true
  },
  addressInfo: {
    type: Object,
    default: () => {
      
    }
  }
})

const emit = defineEmits(['submit', 'update:show'])
onMounted(() => {})
const popup = ref<any>(null)
async function open() {
  popup.value?.open('bottom')
  updateShow(true)
}
function close() {
  popup.value?.close()
  updateShow(false)
}
function subMite(value: any) {
  emit('submit', value)
  close()
}
function updateShow(value: boolean) {
  emit('update:show', value)
}
defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.bgWite{background: #fff;max-height: 1000rpx;border-radius: 30rpx 30rpx 0 0;position: relative;
  padding-bottom: 30rpx;
  .title{font-size: 32rpx;height:90rpx;}
  .colse{position: absolute;right: 30rpx;top:30rpx;}
  .submite{
   height: 80rpx;background: #FE7431;color: #fff;font-size: 32rpx;font-weight: bold;border-radius: 80rpx;display: flex;justify-content: center;align-items: center;
    font-size: 26rpx;margin: 30rpx 30rpx 0;
  }
  .stroeInfo{text-align: center;padding: 60rpx 0 30rpx;
    image{width: 200rpx;height: 200rpx;}
    .stroe-title{font-size: 30rpx;font-weight: bold;color: #323233;margin: 10rpx 0;}
    .km{color: #FE7431;font-size: 26rpx;}
  }
 .stroe-address{font-size: 28rpx;color: #646566;padding: 40rpx 30rpx;margin:30rpx 30rpx 0;background: #F5F6F7;border-radius: 20rpx;
    
  }
  .stroe-team{font-size: 28rpx;color: #646566;margin:20rpx 30rpx 30rpx;
    .flex-1{padding: 40rpx 30rpx;background: #F5F6F7;border-radius: 20rpx;}
    .flex-1:last-child{margin-left: 20rpx;}
  }
}
</style>
